<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="addtag"> 添加 </el-button>
    </div>
    <el-table v-loading="loading" :data="tagdata" style="width: 100%">
      <el-table-column prop="name" label="标记名称" sortable />
      <el-table-column prop="award" label="全职补贴（天）" sortable />
      <el-table-column prop="depart_award" label="兼职补贴（时）" sortable />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"> 编辑 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      width="500"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        style="max-width: 600px"
        :model="formInline"
        label-width="auto"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="标记名称" prop="tagname">
        <span style="display: inline-block; width: 300px;">
          <el-input v-model="formInline.tagname"  placeholder="请输入标记名称" />
        </span>
          
        </el-form-item>
        <el-form-item label="全职补贴" prop="award">
          <span style="display: inline-block; width: 300px;">
            <el-input
              type="number"
              v-model="formInline.award"
              placeholder="请输入金额大小"
            />
          </span>
          <span> (天)</span>
        </el-form-item>
        <el-form-item label="兼职补贴" prop="depart_award">

          <span style="display: inline-block; width: 300px;">
            <el-input
              type="number"
              v-model="formInline.depart_award"
              placeholder="请输入金额大小"
            />
          </span>
          <span> (时)</span>

          <!-- <el-input v-model="formInline.depart_award" placeholder="请输入金额大小" /> -->
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleadd(formRef)"> 保存 </el-button>
          <!-- <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button> -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getTagInfo, postTagInfo, putTagInfo, delTagInfo } from "@/api/tag";

const tagdata = ref([]);
const loading = ref(false);
const formInline = reactive({
  tagname: "",
  award: "",
  depart_award: "",
});

const rules = reactive({
  tagname: [{ required: true, message: "标记名称不能为空" }],
  award: [{ required: true, message: "金额大小不能为空" }],
  depart_award: [{ required: true, message: "金额大小不能为空" }],
});

const formRef = ref();
const tagid = ref("");

const dialogVisible = ref(false);

const isEide = ref(false);

const addtag = () => {
  formInline.tagname = "";
  formInline.award = "";
  formInline.depart_award = "";
  isEide.value = false;
  dialogVisible.value = true;
};

const cleradata = () => {
  formInline.tagname = "";
  formInline.award = "";
  formInline.depart_award = "";
};

const handleadd = async (val) => {
  if (!val) return;
  val.validate(async (valid) => {
    if (!valid) {
      return;
    }

    try {
      if (isEide.value) {
        const res = await putTagInfo({
          id: tagid.value,
          name: formInline.tagname,
          award: formInline.award,
          depart_award: formInline.depart_award,
        });

        if (res.code == "200") {
          ElMessage.success("修改成功");
          cleradata();
          gettaglist(false);
        } else {
          ElMessage.error("修改失败");
        }
      } else {
        const res = await postTagInfo({
          name: formInline.tagname,
          award: formInline.award,
          depart_award: formInline.depart_award,
        });

        if (res.code == "200") {
          ElMessage.success("添加成功");
          formInline.tagname = "";
          gettaglist(false);
        } else {
          ElMessage.error("添加失败");
        }
      }
      dialogVisible.value = false;
    } catch (error) {
      console.error(error);
    }
  });
};

const handleEdit = (row) => {
  isEide.value = true;
  tagid.value = row.id;
  dialogVisible.value = true;
  formInline.tagname = row.name;
  formInline.award = row.award;
  formInline.depart_award = row.depart_award;
};

const handleDelete = async (row) => {
  try {
    const res = await delTagInfo({
      id: row.id,
    });

    if (res.code == "200") {
      ElMessage.success("删除成功");
      formInline.tagname = "";
      gettaglist(false);
    } else {
      ElMessage.error("删除失败");
    }
  } catch (error) {
    console.error(error);
  }
};

const gettaglist = async (addval) => {
  if (addval) {
    loading.value = true;
  }

  try {
    const res = await getTagInfo();
    if (res.code == 200) {
      loading.value = false;
      tagdata.value = res.data;
    } else {
    }
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
};

onMounted(async () => {
  gettaglist(true);
});
</script>

<style lang="scss" scoped></style>
